<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.0/gsap.min.js"></script>
  <style>
    .col {
      margin: 200px auto;
      text-align: center;
    }

    .magnetic {
      margin: -100px;
      padding: 100px;
      display: inline-block;
      border-radius: 50%;
      /* border: 1px solid; */
    }

    #magnet-button {
      display: inline-block;
    }

    .my-button {
      background-color: #FFF;
      height: 100px;
      width: 100px;
      border-radius: 50%;
      border: 1px solid #000;
      cursor: pointer;
      overflow: hidden;
      position: relative;
    }

    .hidden {
      top: -150% !important;
      transition: all 0.5s;
    }

    .bag {
      background: red;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      /* transform: translate(-100px,-100px); */
      top: 0;
      left: 0;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="a"></div>
  <div class="col">
    <div class="magnetic">
      <button href="#" class="magBtn magnet-button my-button">
        <div class="bag"></div>
      </button>
    </div>
  </div>

  <script>
    var magnets = document.querySelectorAll('.magnetic')
    var magBtn = document.querySelectorAll('.magBtn')
    var bag = document.getElementsByClassName('bag')[0]
    var strength = 50

    let showBag = false
    let entryTop, entryLeft

    magnets.forEach((magnet) => {
      magnet.addEventListener('mousemove', moveMagnet);
      magnet.addEventListener('mouseout', function (event) {
        console.log(event);
        TweenMax.to(event.currentTarget, 1, { x: 0, y: 0, ease: Power4.easeOut })
        showBag = false
        let top, left
        if (entryTop < 150) {
          top = 100
        } else {
          top = -(entryTop + 100)
        }
        if (entryLeft < 150) {
          left = 100
        } else {
          left = -(entryLeft + 100)
        }
        console.log(left,entryLeft);
        TweenMax.fromTo(bag, 0.8, { left: 0, top: 0 }, { top: entryTop + top, left: entryLeft + left })
        // TweenMax.to(bag, 0.8, { top:'-101%', ease: Power4.easeOut })
        // const inter = setInterval(() => {
        //   if (bag.style.top === '-101%') {
        //     bag.style.top = '100%'
        //     clearInterval(inter)
        //   }
        // }, 100);
      });
    });

    function moveMagnet(event) {
      // console.log('magBtn', magBtn[0].style);
      document.getElementById('a').innerHTML = event.layerX + '---' + event.layerY
      var magnetButton = event.currentTarget
      var bounding = magnetButton.getBoundingClientRect()

      TweenMax.to(magBtn, 1, {
        x: (((event.clientX - bounding.left) / magnetButton.offsetWidth) - 0.5) * strength,
        y: (((event.clientY - bounding.top) / magnetButton.offsetHeight) - 0.5) * strength,
        ease: Power4.easeOut
      })
      if (!showBag) {
        TweenMax.fromTo(bag, 0.8, { left: event.layerX - 100, top: event.layerY - 100 }, { top: 0, left: 0 })
        entryTop = event.layerY
        entryLeft = event.layerX
        showBag = true
      }
    }
  </script>
</body>

</html>